<template>
  <view>
    <view class="update">检查更新</view>
    <view class="logo">
	  <image class="logo" src="../../static/logo.png"></image>
    </view>
    <view class="progress">
      <view class="inner" :style="{ width: progress + '%' }"></view>
    </view>
    <view class="tips">{{ tips }}</view>

    <u-modal
      v-model="modalShow"
      v-bind="modal"
      cancel-color="#999999"
      show-cancel-button
      @confirm="fnConfirm"
      @cancel="util.router.back"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      modalShow: false, // 是否显示确认框
      modalType: 0, // 0:下载失败 1:安装成功 2:安装失败
      dtask: null, // 下载 task 对象
      tips: '检查更新...', // 更新提示词
      progress: 0 //
    }
  },
  computed: {
    modal() {
      const t = this.modalType
      return {
        'confirm-text': t === 1 ? '重启应用' : '重新下载',
        content: t === 1 ? '安装成功，是否重启？' : `${t ? '安装' : '下载'}失败，是否重新下载？`
      }
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    this.download()
    // #endif
  },
  onUnload() {
    // 如果是下载中则取消下载
    if (this.progress > 0 && this.progress < 100) {
      this.dtask.abort()
    }
    // 如果关闭页面还没有安装成功
    if (this.$state.version.install !== 2) {
      this.$state.version.install = 0
    }
  },
  methods: {
    // 下载
    download() {
      const { url, server, task } = this.$state.version

      // 如果存在下载任务则取消下载
      // if (task) task.abort()
      this.dtask = plus.downloader.createDownload(url, {
        // url: `_downloads/jfh/app/${server}.wgt`
      })
	  // return ;
      this.dtask.start()

      this.dtask.addEventListener('statechanged', (download, status) => {
        switch (download.state) {
          case 1: // 开始
            this.setState(0, '准备下载...')
            break
          case 2: // 已连接到服务器
            this.setState(0, '开始下载...')
            break
          case 3: // 下载中
            const progress = parseInt((download.downloadedSize / download.totalSize) * 100)
            this.setState(progress, `正在下载 ${progress}%`)
            break
          case 4: // 下载完成
            if (status === 200) {
              this.setState(100, '正在安装...')
              this.install(download.filename)//安装
            } else {
              this.setState(0, '下载失败！')
              this.setModal(0)
            }
        }
      })
    },
    // 设置下载状态
    setState(progress, tips) {
      this.progress = progress
      this.tips = tips
    },
    // 设置弹框状态
    setModal(type) {
      this.modalType = type
      this.modalShow = true
    },
    // 安装
    install(file) {
      plus.runtime.install(
        file,//文件名
        { force: true },
        () => {
          const version = this.$state.version
          this.$state.version = { ...version, install: 2, local: version.server, update: false }//修改版本状态
		 setTimeout(()=>{
			  plus.runtime.restart()//重新启动
		 },2000)
          // this.setModal(1)
        },
        () => {
          this.setState(0, '安装失败！')
          this.setModal(2)
        }
      )
    },
    // 弹框确认事件
    fnConfirm() {
      if (this.modalType === 1) plus.runtime.restart()
      else this.download()
    }
  }
}
</script>

<style lang="scss">
@include page;
.update{
	margin-top: 120rpx;
	width: 100%;
	text-align: center;
}
.logo {
  @include flex;
  justify-content: center;
  padding: 30rpx 0;
  image {
    width: 200rpx;
    height: 200rpx;
    // animation: rotate 3s linear infinite;
  }
}
// @keyframes rotate {
//   from {
//     transform: rotate(0);
//   }
//   to {
//     transform: rotate(360deg);
//   }
// }
.progress {
  width: calc(100% - 100rpx);
  height: 18rpx;
  margin: 0 50rpx;
  border-radius: 9rpx;
  background-color: $background-color-base;
  overflow: hidden;
  .inner {
    // background: linear-gradient(135deg, rgba(#00af50, 0.8), rgba(#fa0012, 0.8));
    background-color: $light-color;
    width: 0;
    height: 100%;
    border-radius: 9rpx;
    max-width: 100%;
    transition: width 0.3s;
  }
}
.tips {
  font-size: 24rpx;
  color: $color-text-regular;
  text-align: center;
  margin-top: 30rpx;
  letter-spacing: 2rpx;
}
</style>
